/**
 * 系统管理 用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>登录密码</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 创建一个居中的模块 -->
    <el-col :span="8" :offset="8">
      <el-card shadow="hover" style="margin-top: 100px">
        <div slot="header" class="clearfix">
          <span>登录密码</span>
        </div>
        <div>
          <el-form
            :model="formInline"
            :rules="rules"
            ref="formInline"
            label-width="80px"
            class="demo-form-inline"
          >
            <el-form-item label="原密码" prop="oldPwd">
              <el-input
                v-model="formInline.oldPwd"
                placeholder="请输入原密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
              <el-input
                v-model="formInline.newPwd"
                placeholder="请输入新密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password">
              <el-input
                v-model="formInline.password"
                placeholder="请输入确认密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit('formInline')">提交</el-button>
              <el-button @click="resetForm('formInline')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-col>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //表单校验
      rules: {
        //原密码，必填，长度为6-20位，只能包含字母、数字
        oldPwd: [
          { required: true, message: "请输入原密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: "只能输入字母、数字",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入原密码"));
              } else {
                this.checkOldPwd(value, callback);
              }
            },
            trigger: "blur",
          },
        ],
        //新密码，必填，长度为6-20位，只能包含字母、数字，不能与原密码相同
        newPwd: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: "只能输入字母、数字",
            trigger: "blur",
          },
          //离焦校验
          {
            validator: (rule, value, callback) => {
              if (value === this.formInline.oldPwd) {
                callback(new Error("新密码不能与原密码相同"));
              } else {
                callback();
              }
            },
          },
        ],
        //确认密码，必填，长度为6-20位，只能包含字母、数字，与新密码相同，不能与原密码相同
        password: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: "只能输入字母、数字",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === this.formInline.oldPwd) {
                callback(new Error("确认密码不能与原密码相同"));
              } else if (value !== this.formInline.newPwd) {
                callback(new Error("确认密码与新密码不一致"));
              } else {
                callback();
              }
            },
          },
        ],
      },
      // 选择数据
      selectdata: [],
      // 请求数据参数
      formInline: {
        id: JSON.parse(localStorage.getItem("userdata")).id,
        uname: JSON.parse(localStorage.getItem("userdata")).uname,
        password: "",
        oldPwd: "",
        newPwd: "",
      },
      //用户数据
      userData: [],
      // 数据权限
      UserDept: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 选中
      checkmenu: [],
    };
  },
  // 注册组件
  components: {},

  /**
   * 数据发生改变
   */
  watch: {},

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline);
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 后端校验原密码是否正确
    checkOldPwd(value, callback) {
      this.$axios
        .post("/api/account/checkOldPwd", {
          id: this.formInline.id,
          uname: this.formInline.uname,
          password: value,
        })
        .then((res) => {
          if (res.data.code == 200) {
            callback();
          } else {
            callback(new Error(res.data.message));
          }
        });
    },
    //提交
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.formInline);
          this.$axios
            .put("/api/account/modpwd", this.formInline)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.$router.push("/login");
                //清空localStorage 
                localStorage.clear();
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error",
                });
              }
            });
        } else {
          console.log("error submit!!!");
          return false;
        }
      });
    },
    // 获取数据方法
    getdata(parameter) {
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      // 获取用户数据
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 